<!-- AdjustmentPage.vue -->
<template>
  <div class="layout">
    <div class="adjustment-container">
      <div class="tit">误差调整</div>

      <!-- 新增的日期筛选栏 -->
      <div class="filter-bar">
        <div class="date-filter">
          <span class="filter-label">申请日期范围：</span>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="开始日期"
            value-format="YYYY-MM-DD"
            class="date-picker"
            :disabled-date="endDate ? (time) => time > endDate : undefined"
          />
          <span class="separator">至</span>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="结束日期"
            value-format="YYYY-MM-DD"
            class="date-picker"
            :disabled-date="startDate ? (time) => time < startDate : undefined"
          />
          <el-button
            plain
            @click="clearDateFilter"
            icon="refresh"
            class="reset-btn"
            >重置</el-button
          >
        </div>
      </div>

      <div class="btn-list">
        <div class="left-btns">
          <el-button type="primary" icon="plus" @click="showCreateDialog"
            >新建调整申请</el-button
          >
          <el-button icon="refresh" text @click="handleReset"> 刷新 </el-button>
        </div>
      </div>

      <!-- 申请列表 -->
      <div class="table-box">
        <el-table
          :data="filteredAdjustmentList"
          ref="singleTableRef"
          border
          highlight-current-row
          style="width: 100%; height: 100%"
          class="custom-table"
        >
          <el-table-column
            prop="createdAt"
            label="申请日期"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              {{ formatDateTime(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createdBy"
            label="申请人"
            width="80"
            align="center"
          />
          <el-table-column
            prop="productName"
            label="物料名称"
            width="100"
            align="center"
          />
          <el-table-column
            prop="specification"
            label="物料规格"
            width="130"
            align="center"
          />
          <el-table-column
            prop="emergencyLevel"
            label="紧急程度"
            width="90"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="row.emergencyLevel === 2 ? 'danger' : 'warning'">
                {{ row.emergencyLevel === 2 ? "紧急" : "常规" }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="调整重量" width="90" align="center">
            <template #default="{ row }">
              {{ (row.adjustedStock - row.beforeStock).toFixed(2) }}kg
            </template>
          </el-table-column>
          <el-table-column label="调整数量" width="90" align="center">
            <template #default="{ row }">
              {{ (row.adjustedPiece - row.beforePiece).toFixed(0) }}pcs
            </template>
          </el-table-column>
          <el-table-column
            prop="adjustmentStatus"
            label="状态"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <!-- 已审批状态显示审批结果 -->
              <template v-if="row.adjustmentStatus === '已审批'">
                <el-tag :type="resultStyleMap[row.approveResult]">
                  {{ resultMap[row.approveResult] }}
                </el-tag>
              </template>

              <!-- 未审批状态显示原始状态 -->
              <template v-else>
                <el-tag :type="statusStyleMap[row.adjustmentStatus]">
                  {{ statusMap[row.adjustmentStatus] }}
                </el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="approvedBy"
            label="审批人"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.approvedBy">{{ row.approvedBy }}</span>
              <span v-else class="empty-text">尚未审批</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="adjustmentReason"
            label="调整原因"
            width="200"
            align="center"
          />

          <el-table-column
            label="操作"
            width="180"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                @click="showApprovalDrawer(row)"
                v-if="row.adjustmentStatus === '未审批'"
                >审批</el-button
              >
              <el-button size="small" @click="showDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 新建申请弹窗 -->
      <el-dialog
        v-model="createDialogVisible"
        title="库存误差调整申请"
        width="800px"
        :close-on-click-modal="false"
        draggable
      >
        <el-form
          :model="newApplication"
          ref="applyForm"
          label-width="120px"
          :rules="formRules"
        >
          <!-- 申请人信息 -->
          <el-divider content-position="left">申请信息</el-divider>

          <el-form-item label="申请部门" prop="createrDepartment">
            <el-input
              v-model="newApplication.createrDepartment"
              placeholder="填写部门名称"
            />
          </el-form-item>

          <el-form-item label="申请人" prop="createdBy">
            <el-input v-model="newApplication.createdBy" placeholder="姓名" />
          </el-form-item>

          <el-form-item label="紧急程度" prop="emergencyLevel">
            <el-radio-group v-model="newApplication.emergencyLevel">
              <el-radio :value="1">常规</el-radio>
              <el-radio :value="2">紧急</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="申请日期" prop="createdAt">
            <el-date-picker
              v-model="newApplication.createdAt"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 物料信息 -->
          <el-divider content-position="left">物料信息</el-divider>

          <el-form-item label="物料名称" prop="productName">
            <el-input
              v-model="newApplication.productName"
              placeholder="填写物料名称"
              @input="getProducts"
            />
          </el-form-item>
          <el-form-item label="物料规格" prop="specification">
            <el-input
              v-model="newApplication.specification"
              placeholder="若有规格，请填写物料规格"
              @input="getProducts"
            />
          </el-form-item>

          <el-form-item label="当前重量" prop="beforeStock">
            <el-input-number
              v-model="newApplication.beforeStock"
              :precision="2"
              disabled
            />
          </el-form-item>

          <el-form-item label="调整后重量" prop="adjustedStock">
            <el-input-number
              v-model="newApplication.adjustedStock"
              :min="0"
              :precision="2"
            />
          </el-form-item>

          <el-form-item label="当前数量" prop="beforePiece">
            <el-input-number
              v-model="newApplication.beforePiece"
              :precision="2"
              disabled
            />
          </el-form-item>

          <el-form-item label="调整后数量" prop="adjustedPiece">
            <el-input-number
              v-model="newApplication.adjustedPiece"
              :min="0"
              :precision="2"
            />
          </el-form-item>

          <!-- 调整信息 -->
          <el-divider content-position="left">调整信息</el-divider>

          <el-form-item label="调整原因" prop="adjustmentReason">
            <el-input
              v-model="newApplication.adjustmentReason"
              type="textarea"
              :rows="3"
              placeholder="详细说明调整原因"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApplication"
            >提交申请</el-button
          >
        </template>
      </el-dialog>

      <!-- 审批抽屉 -->
      <el-drawer
        v-model="approvalDrawerVisible"
        title="申请审批"
        size="40%"
        :before-close="handleCloseApproval"
      >
        <div v-if="currentApplication" class="approval-content">
          <!-- 申请详情展示 -->
          <el-descriptions :column="1" border>
            <el-descriptions-item label="调整单号">
              {{ currentApplication.id }}
            </el-descriptions-item>
            <el-descriptions-item label="申请部门">
              {{ currentApplication.createrDepartment }}
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              {{ currentApplication.createdBy }}
            </el-descriptions-item>

            <!-- 物料信息 -->
            <el-descriptions-item label="物料信息">
              物料名称：{{ currentApplication.productName }}/物料规格：{{
                currentApplication.specification
              }}
            </el-descriptions-item>
            <el-descriptions-item label="重量调整">
              <span :style="{ color: approvalStockDiffColor }">
                {{
                  (
                    currentApplication.adjustedStock -
                    currentApplication.beforeStock
                  ).toFixed(2)
                }}
                kg
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="数量调整">
              <span :style="{ color: approvalPieceDiffColor }">
                {{
                  currentApplication.adjustedPiece -
                  currentApplication.beforePiece
                }}
                pcs
              </span>
            </el-descriptions-item>
            <!-- 其他信息 -->
            <el-descriptions-item label="紧急程度">
              <el-tag
                :type="
                  currentApplication.emergencyLevel === 2 ? 'danger' : 'warning'
                "
              >
                {{ currentApplication.emergencyLevel === 2 ? "紧急" : "常规" }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="调整原因">
              <div class="reason-text">
                {{ currentApplication.adjustmentReason }}
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <el-divider content-position="left">审批信息</el-divider>
          <el-form
            ref="approvalFormRef"
            :model="approvalForm"
            :rules="approvalRules"
          >
            <el-form-item label="审批结果" prop="approveResult">
              <el-radio-group v-model="approvalForm.approveResult">
                <el-radio value="通过">通过</el-radio>
                <el-radio value="不通过">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="approvedComment">
              <el-input
                v-model="approvalForm.approvedComment"
                placeholder="请输入审批意见"
              />
            </el-form-item>
            <el-form-item label="采取措施" prop="adjustAction">
              <el-input
                v-model="approvalForm.adjustAction"
                type="textarea"
                :rows="3"
                placeholder="请输入采取措施"
              />
            </el-form-item>
            <el-form-item label="审批人" prop="approvedBy">
              <el-input
                v-model="approvalForm.approvedBy"
                placeholder="请输入审批人姓名"
              />
            </el-form-item>
            <el-button
              type="primary"
              @click="submitApproval"
              style="width: 100%; margin-top: 20px"
              >提交审批</el-button
            >
          </el-form>
        </div>
      </el-drawer>

      <!-- 详情弹窗 -->
      <el-dialog
        v-model="detailDialogVisible"
        title="调整申请详情"
        width="700px"
        draggable
      >
        <el-descriptions
          :column="1"
          border
          label-align="right"
          label-size="120px"
        >
          <el-descriptions-item label="调整单号">
            {{ currentDetail?.id }}
          </el-descriptions-item>
          <el-descriptions-item label="申请部门">
            {{ currentDetail?.createrDepartment }}
          </el-descriptions-item>
          <el-descriptions-item label="申请人">
            {{ currentDetail?.createdBy }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ formatDateTime(currentDetail?.createdAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="物料信息">
            物料名称：{{ currentDetail?.productName }} / 物料规格：{{
              currentDetail?.specification
            }}
          </el-descriptions-item>
          <!-- 库存详情 -->
          <el-descriptions-item label="当前重量">
            {{ currentDetail?.beforeStock.toFixed(2) }} kg
          </el-descriptions-item>
          <el-descriptions-item label="调整后重量">
            {{ currentDetail?.adjustedStock.toFixed(2) }} kg
          </el-descriptions-item>
          <el-descriptions-item label="重量调整量">
            <span :style="{ color: adjustmentStockDiffColor }">
              {{
                (
                  currentDetail?.adjustedStock - currentDetail?.beforeStock
                ).toFixed(2)
              }}kg
            </span>
          </el-descriptions-item>

          <el-descriptions-item label="当前数量">
            {{ currentDetail?.beforePiece }} pcs
          </el-descriptions-item>
          <el-descriptions-item label="调整后数量">
            {{ currentDetail?.adjustedPiece }} pcs
          </el-descriptions-item>
          <el-descriptions-item label="数量调整量">
            <span :style="{ color: adjustmentPieceDiffColor }">
              {{ currentDetail?.adjustedPiece - currentDetail?.beforePiece }}
              pcs
            </span>
          </el-descriptions-item>

          <el-descriptions-item label="紧急程度">
            <el-tag
              :type="currentDetail?.emergencyLevel === 2 ? 'danger' : 'warning'"
            >
              {{ currentDetail?.emergencyLevel === 2 ? "紧急" : "常规" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="调整原因">
            {{ currentDetail?.adjustmentReason }}
          </el-descriptions-item>
          <el-descriptions-item label="审批结果">
            <template v-if="currentDetail?.adjustmentStatus === '已审批'">
              <el-tag :type="resultStyleMap[currentDetail?.approveResult]">
                {{ resultMap[currentDetail?.approveResult] }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag :type="statusStyleMap[currentDetail?.adjustmentStatus]">
                {{ statusMap[currentDetail?.adjustmentStatus] }}
              </el-tag>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="审批人">
            {{ currentDetail?.approvedBy || "尚未审批" }}
          </el-descriptions-item>
          <el-descriptions-item label="审批意见">
            {{ currentDetail?.approvedComment || "尚未审批" }}
          </el-descriptions-item>
          <el-descriptions-item label="采取措施">
            {{ currentDetail?.adjustAction || "尚未审批" }}
          </el-descriptions-item>
        </el-descriptions>

        <template #footer>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import axios from "axios";
import request from "@/utils/request";

// 状态映射
const statusMap = {
  未审批: "未审批",
  已审批: "已审批",
};
const statusStyleMap = {
  未审批: "warning",
  已审批: "primary",
};
const resultMap = {
  通过: "通过",
  驳回: "不通过",
};

const resultStyleMap = {
  通过: "success",
  驳回: "danger",
};
// 时间格式化
const formatDateTime = (isoString) => {
  return dayjs(isoString).format("YYYY-MM-DD");
};

const startDate = ref("");
const endDate = ref("");

// 初始化日期范围
const initDateRange = () => {
  const now = dayjs();
  startDate.value = now.startOf("month").format("YYYY-MM-DD");
  endDate.value = now.format("YYYY-MM-DD");
};

const clearDateFilter = () => {
  initDateRange();
};

const loadAdjustments = async () => {
  try {
    const response = await request({
      method: "get",
      url: "inventory/adjustment/getAllAdjustments",
      headers: { "Content-Type": "application/json" },
    });
    adjustmentList.value = response.data.data.map((item) => ({
      ...item,
      createdAt: formatDateTime(item.createdAt), // 格式化时间
    }));
  } catch (error) {
    console.log(error);
  }
};

const handleReset = async () => {
  await loadAdjustments();
  ElMessage.success("数据已刷新");
};

const filteredAdjustmentList = computed(() => {
  if (!startDate.value && !endDate.value) return adjustmentList.value;

  return adjustmentList.value.filter((item) => {
    // 处理原始数据时间
    const itemDate = dayjs(item.createdAt);

    // 处理开始时间 (包含当天)
    const start = startDate.value
      ? dayjs(startDate.value).startOf("day") // 00:00:00
      : null;

    // 处理结束时间 (包含当天)
    const end = endDate.value
      ? dayjs(endDate.value).endOf("day") // 23:59:59
      : null;

    let valid = true;
    if (start) valid = valid && itemDate.isAfter(start);
    if (end) valid = valid && itemDate.isBefore(end);
    return valid;
  });
});

// 申请列表数据
const adjustmentList = ref([]);

const applyForm = ref(null);
// 新建申请表单
const createDialogVisible = ref(false);
const newApplication = reactive({
  productName: "",
  specification: "",
  beforeStock: 0,
  adjustedStock: 0,
  beforePiece: 0,
  adjustedPiece: 0,
  emergencyLevel: 1,
  adjustmentReason: "",
  createrDepartment: "",
  createdBy: "",
  createdAt: "",
});

// 审批表单
const approvalDrawerVisible = ref(false);
const currentApplication = ref(null);
const approvalForm = reactive({
  approveResult: "通过",
  adjustAction: "",
  approvedComment: "",
  approvedBy: "",
});

// 表单验证规则
const formRules = {
  createdBy: [{ required: true, message: "请输入申请人", trigger: "blur" }],
  createdAt: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  createrDepartment: [
    { required: true, message: "请输入申请部门", trigger: "blur" },
  ],
  emergencyLevel: [
    { required: true, message: "请选择紧急程度", trigger: "change" },
  ],
  productName: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
  specification: [{ message: "若有规格，请输入物料规格", trigger: "blur" }],
  adjustedPiece: [
    {
      required: true,
      validator: (_, value, callback) => {
        if (value < 0) return callback("调整后库存数量不能为负数");
        callback();
      },
    },
  ],
  adjustedStock: [
    {
      required: true,
      validator: (_, value, callback) => {
        if (value < 0) return callback("调整后库存重量不能为负数");
        if (value === newApplication.beforeStock)
          return callback("调整后重量不能与当前相同");
        callback();
      },
    },
  ],
  adjustmentReason: [
    { required: true, message: "请输入调整原因", trigger: "blur" },
    { min: 10, message: "至少输入10个字符", trigger: "blur" },
  ],
};

// 新增验证规则
const approvalRules = {
  adjustAction: [
    { required: true, message: "请输入采取措施", trigger: "blur" },
  ],
  approvedComment: [
    { required: true, message: "请输入审批意见", trigger: "blur" },
  ],
  approveResult: [
    { required: true, message: "请选择审批结果", trigger: "change" },
  ],
  approvedBy: [{ required: true, message: "请输入审批人", trigger: "blur" }],
};

//重置数据
const initialFormData = {
  createdAt: "",
  productName: "",
  specification: "",
  beforeStock: 0,
  adjustedStock: 0,
  beforePiece: 0,
  adjustedPiece: 0,
  emergencyLevel: 1,
  adjustmentReason: "",
  createrDepartment: "",
  createdBy: "",
  createdAt: dayjs().format("YYYY-MM-DD HH:mm:ss"),
};
// 显示新建对话框
const showCreateDialog = () => {
  Object.assign(newApplication, initialFormData);
  newApplication.createdAt = dayjs().format("YYYY-MM-DD HH:mm:ss");
  createDialogVisible.value = true;
};

const theProduct = ref(null);
const products = [];
const getProducts = async () => {
  if (!newApplication.productName && !newApplication.specification) {
    return;
  }
  try {
    const productInfo = {
      productName: newApplication.productName,
      specification: newApplication.specification,
    };
    const response = await request({
      method: "post",
      url: "inventory/products/getProductsByPrams",
      headers: { "Content-Type": "application/json" },
      data: productInfo,
    });
    products.value = response.data.data;
    getTheProduct();
  } catch (error) {
    console.log(error);
  }
};

const getTheProduct = () => {
  const exactMatch = (product) => {
    return (
      product.productName.trim().toLowerCase() ===
        newApplication.productName.trim().toLowerCase() &&
      product.specification.trim().toLowerCase() ===
        newApplication.specification.trim().toLowerCase()
    );
  };

  // 在products数组中查找完全匹配项
  const matched = products.value.find(exactMatch);

  if (matched) {
    theProduct.value = matched;
    console.log(theProduct.value);
    // 自动填充库存数据
    newApplication.beforeStock = Number(matched.stock) || 0;
    newApplication.beforePiece = Number(matched.piece) || 0;
    //ElMessage.success("找到匹配的产品");
  } else {
    theProduct.value = null;
    // 清空库存数据
    newApplication.beforeStock = 0;
    newApplication.beforePiece = 0;
    //ElMessage.warning("未找到完全匹配的产品，请检查输入");
  }
};

// 提交申请
const submitApplication = async () => {
  try {
    if (!theProduct.value) {
      return ElMessage.error("请选择有效的物料信息");
    }
    await applyForm.value.validate();
  } catch (error) {
    return ElMessage.warning("请完善审批信息");
  }
  try {
    const payload = {
      ...newApplication,
      adjustmentStatus: "未审批",
    };
    const response = await request({
      method: "post",
      url: "inventory/adjustment/createAdjustment",
      headers: { "Content-Type": "application/json" },
      data: payload,
    });
    if (response.data.success) {
      ElMessage.success("提交成功");
      createDialogVisible.value = false;
      loadAdjustments();
    } else {
      console.log(response.data);
      ElMessage.error("提交失败");
    }
  } catch (error) {
    console.log(error);
  }
};

// 显示审批抽屉
const showApprovalDrawer = (row) => {
  currentApplication.value = { ...row };
  console.log(currentApplication);
  approvalForm.status = "approved";
  approvalForm.comment = "";
  approvalForm.approver = "";
  approvalDrawerVisible.value = true;
};

// 提交审批
const approvalFormRef = ref(null);
const submitApproval = async () => {
  try {
    await approvalFormRef.value.validate();
  } catch (error) {
    return ElMessage.warning("请完善审批信息");
  }

  try {
    const requestData = {
      id: currentApplication.value.id, // 申请的ID
      approveResult: approvalForm.approveResult,
      approvedBy: approvalForm.approvedBy,
      approvedComment: approvalForm.approvedComment,
      adjustAction: approvalForm.adjustAction,
    };
    // 3. 发送审批请求
    const response = await request({
      method: "post",
      url: "inventory/adjustment/approve",
      data: requestData,
      headers: {
        "Content-Type": "application/json",
      },
    });
    if (response.data.success) {
      ElMessage.success("审批提交成功");
      approvalDrawerVisible.value = false;
      loadAdjustments();
    }
  } catch (error) {
    console.error("审批提交失败:", error);
  }
};

// 关闭审批抽屉前的确认
const handleCloseApproval = (done) => {
  if (approvalForm.comment || approvalForm.approver) {
    ElMessageBox.confirm("当前审批信息未保存，确定要离开吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        done();
      })
      .catch(() => {});
  } else {
    done();
  }
};
const approvalStockDiffColor = computed(() => {
  if (!currentApplication.value) return "#333";
  const diff =
    currentApplication.value.adjustedStock -
    currentApplication.value.beforeStock;
  return diff > 0 ? "#67C23A" : diff < 0 ? "#F56C6C" : "#909399";
});

const approvalPieceDiffColor = computed(() => {
  if (!currentApplication.value) return "#333";
  const diff =
    currentApplication.value.adjustedPiece -
    currentApplication.value.beforePiece;
  return diff > 0 ? "#67C23A" : diff < 0 ? "#F56C6C" : "#909399";
});

const detailDialogVisible = ref(false); // 控制详情弹窗
const currentDetail = ref(null); // 当前查看的详情数据

const showDetail = (row) => {
  currentDetail.value = { ...row };
  console.log(currentDetail);
  detailDialogVisible.value = true;
};

const adjustmentStockDiffColor = computed(() => {
  if (!currentDetail.value) return "#333";
  const diff =
    currentDetail.value.adjustedStock - currentDetail.value.beforeStock;
  return diff > 0 ? "#67C23A" : diff < 0 ? "#F56C6C" : "#909399";
});

const adjustmentPieceDiffColor = computed(() => {
  if (!currentDetail.value) return "#333";
  const diff =
    currentDetail.value.adjustedPiece - currentDetail.value.beforePiece;
  return diff > 0 ? "#67C23A" : diff < 0 ? "#F56C6C" : "#909399";
});

// 初始化加载
onMounted(() => {
  initDateRange();
  loadAdjustments();
});
</script>

<style scoped>
.layout {
  width: 100%;
  height: 100%;
  background-color: #f5f6f9;
  padding-top: 20px;
}
.adjustment-container {
  width: 98%;
  height: 85vh;
  background-color: #ffffff;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tit {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  font-size: 20px;
  text-indent: 1em;
}
.btn-list {
  border: 1px solid #e1e3e5;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin: 0 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.table-box {
  height: calc(100% - 60px);
  flex: 1;
  margin: 0 20px;
  border: none;
  overflow: auto;
}
.empty-text {
  color: #999;
  font-style: italic;
}
.header-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.approval-content {
  padding: 20px;
}

.el-divider {
  margin: 20px 0;
}

.filter-bar {
  margin: 10px 20px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-label {
  font-size: 14px;
  color: #606266;
}

.date-picker {
  width: 160px;
}

.separator {
  color: #909399;
  padding: 0 5px;
}

.reset-btn {
  margin-left: 15px;
}
</style>